<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { useRouter } from "vue-router";

import api from "@/api";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  FolderOpened,
  Setting,
  DeleteFilled,
  Download,
  Select,
  CloseBold,
  Picture,
  VideoCamera,
  Edit
} from "@element-plus/icons-vue";
import { pointProp } from "@/utils/pointProp";
import { read, utils, writeFileXLSX } from "xlsx";
import {
  createPoi,
  flyToPoiShift,
  showAttribute,
  delPoi,
  closePoiLayer,
  drawVideoRange,
} from "@/utils/map";

import { lprFormat } from "@/utils/common";

import carIcon from "@/assets/images/project/car.png";
import admissionIcon from "@/assets/images/project/admission.png";
import ExitIcon from "@/assets/images/project/Exit.png";
import truckIcon from "@/assets/images/project/truck.png";

const route = useRouter();
const { proxy } = getCurrentInstance();

const getType = computed(() => (item) => {
  return item === "crane"
    ? "汽车吊"
    : item === "truck"
      ? "卡车"
      : item === "loader"
        ? "装载车"
        : item === "pump truck"
          ? "泵车"
          : item === "concrete mixer"
            ? "搅拌车"
            : item === "car"
              ? "汽车"
              : item === "bus"
                ? "巴士"
                : item === "other vehicle"
                  ? "待复核"
                  : "待复核";
});

const getTime = computed(() => (item) => {
  return !item ? "--" : moment(item).format("YYYY-MM-DD HH:mm:ss");
});

const vehicle = reactive({
  whole: [
    {
      name: "车辆数量",
      value: 5,
    },
    {
      name: "车辆类型",
      value: 3,
    },
  ],
  type: [
    {
      name: "汽车/轿车",
      value: 0,
      icon: carIcon,
    },
    {
      name: "卡车",
      value: 0,
      icon: truckIcon,
    },
    {
      name: "搅拌车",
      value: 0,
      icon: truckIcon,
    },
  ],
  tabs: [
    {
      name: "出场车辆",
      value: 0,
      icon: ExitIcon,
    },
    {
      name: "入场车辆",
      value: 0,
      icon: admissionIcon,
    },
  ],
  active: -1,
  todayTotal: 0,
  newTableData: [],
  form: {
    startDate: moment().subtract(1, "weeks").format("YYYY-MM-DD"),
    endDate: moment().format("YYYY-MM-DD"),
    direction: "",
    lprNumber: "",
    vehicleType: "",
    whiteListCheck: "",
    algorithmType: "vehicle",
    deviceInfo: ""
  },
  deviceInfos: [],
  times: [
    moment().subtract(1, "weeks").format("YYYY-MM-DD"),
    moment().format("YYYY-MM-DD"),
  ],
  currentImgUrl: "",
  currentVideoUrl: "",
  statisticsUrl: "",
  whiteList: [],
  wlvisible: false,
  dialogWlVisible: false,
  dialogEditVisible: false,
  wlForm: {
    lprNumber: "",
    validStartTime: "2020-01-01 00:00:00",
    validEndTime: "2099-12-31 00:00:00",
    notifyGroup: ["admin", "manager"],
  },
  editForm: {
    id: "",
    vehicleType: "",
    direction: "",
    lprNumber: ""
  },
  queryFormWl: {
    lprNumber: "",
    times: "",
  },
  currentRowKey: "", //当前行的key
  switchActive: 0,
});

const exportFile = function (data) {
  let excelData = [];
  for (let i = 0; i < data.length; i++) {
    excelData.push({
      "类型": getType.value(data[i].vehicleType),
      "车牌信息": data[i].lprNumber,
      "捕捉设备": data[i].deviceInfo,
      "入/出场时间": moment(data[i].time).format("YYYY-MM-DD HH:mm:ss"),
      "出入方向": data[i].direction == "in" ? "入" : "出",
      "车牌颜色": data[i].lprColor,
      "是否在白名单": data[i].whiteListCheck ? '是' : '否',
    });
  }
  const ws = utils.json_to_sheet(excelData);
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, "Data");
  writeFileXLSX(wb, "车辆管理.xlsx");
};

const handleExportButton = function () {
  exportFile(vehicle.newTableData);
};

const getDeviceData = async () => {
  await api.homepage.getHomePageDevicesImpl().then((res) => {
   const filter = [];
   res.deviceInfos.forEach(item => {
      if (item.algorithm.includes('vehicle')) {
        filter.push(item)
      }
   });
    vehicle.deviceInfos = [{
      deviceInfo: '全部',
      deviceId: ''
    }, ...filter];
    vehicle.statisticsUrl = res.statisticServerAddr;
  });
};
// getDeviceData();

const getVehicleData = function (data) {
  let date = new Date().toISOString().split("T")[0];
  vehicle.tabs[0].value = 0;
  vehicle.tabs[1].value = 0;
  api.vehicle
    .getVehicleDataByDuration(vehicle.form)
    .then(async (res) => {
      console.log(res.data);
      await getDeviceData();
      res.data = res.data.map((item) => {
        return {
          ...item,
          deviceInfo: getDeviceInfoById(item.deviceId),
        };
      });
      vehicle.newTableData = res.data;
      vehicle.switchActive = 0;
      for (let i = 0; i < vehicle.newTableData.length; i++) {
        //出场/出场统计
        if (vehicle.newTableData[i].direction === "in") {
          vehicle.tabs[1].value++;
        } else {
          vehicle.tabs[0].value++;
        }
      }

      //车辆管理表格赋值数据第一条为当前行进行高亮默认展示
      if (vehicle.newTableData.length > 0) {
        vehicle.currentImgUrl =
          vehicle.statisticsUrl + vehicle.newTableData[0].imgUrl;

        vehicle.currentVideoUrl =
          vehicle.statisticsUrl + vehicle.newTableData[0].videoUrl;
        vehicle.currentRowKey = vehicle.newTableData[0]._id;
      } else {
        vehicle.currentImgUrl = "";
        vehicle.currentVideoUrl = "";
        vehicle.currentRowKey = ""
      }
    })
    .catch((err) => {
      console.log(err.response);
    });
};

getVehicleData();

onMounted(() => { });

const getDeviceInfoById = (deviceId) => {
  console.log("id", deviceId);
  for (let i = 0; i < vehicle.deviceInfos.length; i++) {
    if (vehicle.deviceInfos[i].deviceId == deviceId) {
      return vehicle.deviceInfos[i].deviceInfo;
    }
  }
  return "未知";
};

const handleRowClick = (row) => {
  vehicle.currentImgUrl = vehicle.statisticsUrl + row.imgUrl;
  vehicle.currentVideoUrl = vehicle.statisticsUrl + row.videoUrl;
  vehicle.switchActive = 0;
  vehicle.currentRowKey = row._id;
};
const typeOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "汽车吊",
    value: "crane",
  },
  {
    label: "卡车",
    value: "truck",
  },
  {
    label: "装载车",
    value: "loader",
  },
  {
    label: "泵车",
    value: "pump truck",
  },
  {
    label: "搅拌车",
    value: "concrete mixer",
  },
  {
    label: "汽车",
    value: "car",
  },
  {
    label: "巴士",
    value: "bus",
  },
  {
    label: "待复核",
    value: "other vehicle",
  },
];

const editTypeOpts = [
  {
    label: "汽车吊",
    value: "crane",
  },
  {
    label: "卡车",
    value: "truck",
  },
  {
    label: "装载车",
    value: "loader",
  },
  {
    label: "泵车",
    value: "pump truck",
  },
  {
    label: "搅拌车",
    value: "concrete mixer",
  },
  {
    label: "汽车",
    value: "car",
  },
  {
    label: "巴士",
    value: "bus",
  },
  {
    label: "待复核",
    value: "other vehicle",
  },
];

const lprOpts = [
  {
    label: "全部",
    value: "",
  },
];

const directionOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "出场",
    value: "out",
  },
  {
    label: "入场",
    value: "in",
  },
];

const editDirectionOpts = [
  {
    label: "出场",
    value: "out",
  },
  {
    label: "入场",
    value: "in",
  },
];

const whiteListCheckOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "是",
    value: true,
  },
  {
    label: "否",
    value: false,
  },
];

const dateChangeHandleClick = function (date) {
  if (date === null) {
    vehicle.form.startDate = "";
    vehicle.form.endDate = "";
  } else {
    vehicle.form.startDate = moment(date[0]).format("YYYY-MM-DD");
    vehicle.form.endDate = moment(date[1]).format("YYYY-MM-DD");
  }
};

const onSubmit = function () {
  api.vehicle
    .getVehicleDataByDuration(vehicle.form)
    .then((res) => {
      const filterList = [];
      res.data.forEach((item) => {
        const flag = [1, 1, 1, 1, 1];

        //前端筛选捕捉设备
        if (vehicle.form.deviceInfo !== '') {
          if (vehicle.form.deviceInfo !== item.deviceId) {
            flag[0] = 0;
          }
        }

        //前端筛选车辆类型
        if (vehicle.form.vehicleType) {
          //对车辆类型进行处理
          const _type = getType.value(item.vehicleType) === '待复核' ? 'other vehicle' : item.vehicleType;
          if (vehicle.form.vehicleType !== _type) {
            flag[1] = 0;
          }
        }

        //前端筛选车牌
        if (vehicle.form.lprNumber) {
          if (
            item.lprNumber &&
            item.lprNumber.indexOf(vehicle.form.lprNumber) === -1
          ) {
            flag[2] = 0;
          }
        }

        //前端筛选出入类型
        if (vehicle.form.direction) {
          if (vehicle.form.direction !== item.direction) {
            flag[3] = 0;
          }
        }

        //前端筛选是否在白名单中
        if (vehicle.form.whiteListCheck !== "") {
          if (vehicle.form.whiteListCheck !== item.whiteListCheck) {
            flag[4] = 0;
          }
        }

        const flagfilter = flag.filter((val) => {
          return val === 0;
        });

        if (flagfilter.length === 0) {
          filterList.push({
            ...item,
            deviceInfo: getDeviceInfoById(item.deviceId),
          });
        }
      });

      vehicle.newTableData = filterList;
      vehicle.tabs[0].value = 0;
      vehicle.tabs[1].value = 0;
      vehicle.switchActive = 0;
      for (let i = 0; i < vehicle.newTableData.length; i++) {
        //出场/出场统计
        if (vehicle.newTableData[i].direction === "in") {
          vehicle.tabs[1].value++;
        } else {
          vehicle.tabs[0].value++;
        }
      }

      //车辆管理表格赋值数据第一条为当前行进行高亮默认展示
      if (vehicle.newTableData.length > 0) {
        vehicle.currentImgUrl =
          vehicle.statisticsUrl + vehicle.newTableData[0].imgUrl;

        vehicle.currentVideoUrl =
          vehicle.statisticsUrl + vehicle.newTableData[0].videoUrl;
        vehicle.currentRowKey = vehicle.newTableData[0]._id;
      } else {
        vehicle.currentImgUrl = "";
        vehicle.currentVideoUrl = "";
        vehicle.currentRowKey = ""
      }
    })
    .catch((err) => {
      console.log(err.response);
    });
};
const onReset = function () {
  vehicle.times = [
    moment().subtract(1, "weeks").format("YYYY-MM-DD"),
    moment().format("YYYY-MM-DD"),
  ];
  vehicle.active = -1;
  vehicle.form.startDate = moment().subtract(1, "weeks").format("YYYY-MM-DD");
  vehicle.form.endDate = moment().format("YYYY-MM-DD");
  vehicle.form.direction = "";
  vehicle.form.lprNumber = "";
  vehicle.form.vehicleType = "";
  vehicle.form.whiteListCheck = "";
  vehicle.form.deviceInfo = "";
  getVehicleData();
};

//设置表格的高度
const tableStyle = ref({
  height: "calc(100vh - 380px)",
});

const handleWhiteList = function () {
  vehicle.wlvisible = !vehicle.wlvisible;
  if (vehicle.wlvisible) {
    getWhiteList();
    tableStyle.value = {
      height: "calc(100vh - 700px)",
    };
  } else {
    tableStyle.value = {
      height: "calc(100vh - 380px)",
    };
  }
};

//获取白名单列表
const getWhiteList = function () {
  api.vehicle.getLprWhiteList().then((res) => {
    vehicle.whiteList = res.data;
  });
};

const ruleFormRef = ref(null);
const ruleFormRefEdit = ref(null);

const validatePass = function (rule, value, cb) {
  if (value === "") {
    return cb(new Error("车牌号不能为空"));
  } else if (!lprFormat.test(value)) {
    return cb(new Error("车牌号格式错误"));
  } else {
    cb();
  }
};

const validatePassEndTime = function (rule, value, cb) {
  if (!value) {
    return cb(new Error("截止时间不能为空"));
  } else if (
    vehicle.wlForm.validStartTime !== "" &&
    new Date(vehicle.wlForm.validEndTime).getTime() <=
    new Date(vehicle.wlForm.validStartTime).getTime()
  ) {
    return cb(new Error("截止时间必须大于生效时间"));
  } else {
    cb();
  }
};

const rules = reactive({
  validEndTime: [
    { required: true, trigger: "blur", validator: validatePassEndTime },
  ],
  validStartTime: [
    { required: true, message: "生效时间不能为空", trigger: "blur" },
  ],
  lprNumber: [{ required: true, validator: validatePass, trigger: "blur" }],
});

const editRules = reactive({
  lprNumber: [{ required: true, validator: validatePass, trigger: "blur" }],
});

//新增白名单
const onAdd = function () {
  vehicle.dialogWlVisible = true;
};

//删除白名单
const handleDelWlItem = function (row) {
  ElMessageBox.confirm(`确定删除【${row.lprNumber}】吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    api.vehicle
      .removeLprWhiteList({
        lprNumber: row.lprNumber,
      })
      .then((res) => {
        onSubmitWhiteList();

        //删除白名单后，更新车辆出入日志列表
        onSubmit();

        ElMessage({
          type: "success",
          message: "删除成功",
        });
      })
      .catch(() => {
        ElMessage.error("删除失败");
      });
  });
};

const dialogWlAdd = function (ruleFormRef) {
  if (!ruleFormRef) return;

  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      api.vehicle
        .addLprWhiteList(vehicle.wlForm)
        .then((res) => {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          onSubmitWhiteList();


          //新增成功后更新车辆出入日志列表
          onSubmit()

          vehicle.dialogWlVisible = false;
        })
        .catch((res) => {
          ElMessage.error("新增失败");
          vehicle.dialogWlVisible = false;
        });
    }
  });
};
//车辆出入日志编辑确定
const dialogEditSubmit = function (ruleFormRefEdit) {
  if (!ruleFormRefEdit) return;

  ruleFormRefEdit.validate((valid, fields) => {
    if (valid) {

      //将车辆类型处理成中文
      editTypeOpts.forEach(item => {
        if (vehicle.editForm.vehicleType === item.value) {
          vehicle.editForm.vehicleType = item.label
        }
      });

      api.vehicle
        .updateLprInfosById(vehicle.editForm)
        .then((res) => {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          onSubmit()
          vehicle.dialogEditVisible = false;
        })
        .catch((res) => {
          ElMessage.error("修改失败");
          vehicle.dialogEditVisible = false;
        });
    }
  });
};


//新增白名单弹出关闭回调
const dialogCloseWl = function () {
  ruleFormRef.value.resetFields();
  // vehicle.wlForm = {
  //   lprNumber: "",
  //   validStartTime: "2020-01-01 00:00:00",
  //   validEndTime: "2099-12-31 00:00:00",
  //   notifyGroup: ["admin", "manager"],
  // };
};

//车辆出入日志编辑弹窗关闭回调
const dialogCloseEdit = function () {

}

//白名单筛选确认
const onSubmitWhiteList = function () {
  api.vehicle.getLprWhiteList().then((res) => {
    //筛选
    const filterList = [];
    res.data.forEach((item) => {
      const flag = [1, 1];
      //判断车牌号
      if (vehicle.queryFormWl.lprNumber) {
        if (
          item.lprNumber &&
          item.lprNumber.indexOf(vehicle.queryFormWl.lprNumber) === -1
        ) {
          flag[0] = 0;
        }
      }

      //判断时间范围
      if (vehicle.queryFormWl.times) {
        const startTime = moment(vehicle.queryFormWl.times[0]).format(
          "YYYY-MM-DD"
        );
        const endTime = moment(vehicle.queryFormWl.times[1]).format(
          "YYYY-MM-DD"
        );
        if (
          !(
            moment(
              moment(item.validStartTime).format("YYYY-MM-DD HH:mm:ss")
            ).isBetween(startTime, endTime) &&
            moment(
              moment(item.validEndTime).format("YYYY-MM-DD HH:mm:ss")
            ).isBetween(startTime, endTime)
          )
        ) {
          flag[1] = 0;
        }
      }

      const isfit = flag.filter((item) => {
        return item === 0;
      });

      if (isfit.length === 0) {
        filterList.push(item);
      }
    });

    vehicle.whiteList = filterList;
  });
};
//白名单重置
const onResetWhiteList = function () {
  vehicle.queryFormWl = {
    lprNumber: "",
    times: "",
  };
  getWhiteList();
};

//车辆管理表格key赋值
const getRowKeys = function (row) {
  return row._id;
};

//图片/视频切换
const switchHandleClick = function (type) {
  if (type === "pic") {
    vehicle.switchActive = 0;
  } else if (type === "video") {
    vehicle.switchActive = 1;
  }
};
//车辆管理表格添加白名单
const addWhiteListHandleClick = function (row) {
  ElMessageBox.confirm(`确认将【${row.lprNumber}】添加至白名单?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      api.vehicle
        .addLprWhiteList({
          lprNumber: row.lprNumber,
          validStartTime: "2020-01-01 00:00:00",
          validEndTime: "2099-12-31 00:00:00",
          notifyGroup: ["admin", "manager"],
        })
        .then((res) => {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          onSubmitWhiteList();

          //一键新增成功后更新车辆出入日志列表
          onSubmit();
        })
        .catch((res) => {
          ElMessage.error("新增失败");
        });
    })
    .catch(() => { });
};

//车辆编辑功能
const editHandleClick = function (row) {
  vehicle.dialogEditVisible = true;
  nextTick(() => {
    ruleFormRefEdit.value.resetFields();

    //对车辆类型进行处理
    if (getType.value(row.vehicleType) === '待复核' && row.vehicleType !== 'other vehicle') {
      row.vehicleType = 'other vehicle'
    }

    vehicle.editForm.id = row._id;
    vehicle.editForm.lprNumber = row.lprNumber;
    vehicle.editForm.vehicleType = row.vehicleType;
    vehicle.editForm.direction = row.direction;
  })
}
</script>

<template>
  <div class="container">
    <div class="tabs">
      <div class="currentTotal">
        <i></i>
        <div class="desc">
          <span class="desc-top">车辆数量</span>
          <div class="value">{{ vehicle.newTableData.length }}</div>
        </div>
      </div>
      <div class="tab-item" :class="index === vehicle.active ? 'active' : ''" v-for="(item, index) in vehicle.tabs"
        :key="index" @click="itemHandleClick(item, index)">
        <img :src="item.icon" />
        <div class="desc">
          <span class="desc-top">{{ item.name }}</span>
        </div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
    <div class="toolbar">
      <el-form :model="vehicle.form" label-width="100px">
        <el-form-item label="车辆类型" label-width="80px" style="width:200px">
          <el-select size="small" v-model="vehicle.form.vehicleType" placeholder="请选择">
            <el-option v-for="item in typeOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="车牌" label-width="60px">
          <el-input size="small" v-model="vehicle.form.lprNumber" placeholder="请输入车牌信息" />
        </el-form-item>

        <el-form-item label="出入方向" label-width="80px" style="width:200px">
          <el-select size="small" v-model="vehicle.form.direction" placeholder="请选择">
            <el-option v-for="item in directionOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="捕捉设备" label-width="80px">
          <el-select size="small" v-model="vehicle.form.deviceInfo" placeholder="请选择">
            <el-option v-for="item in vehicle.deviceInfos" :key="item.deviceId" :label="item.deviceInfo"
              :value="item.deviceId" />
          </el-select>
        </el-form-item>

        <el-form-item label="起止时间" label-width="80px">
          <el-date-picker size="small" v-model="vehicle.times" type="daterange" range-separator="一"
            start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChangeHandleClick" />
        </el-form-item>

        <el-form-item label="是否在白名单" style="width:200px">
          <el-select size="small" v-model="vehicle.form.whiteListCheck" placeholder="请选择">
            <el-option v-for="item in whiteListCheckOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button :icon="Search" size="small" type="primary" color="#8F93F7" style="color: #ffffff"
            @click="onSubmit">搜索</el-button>
          <el-button color="#FFFFFF" :icon="Refresh" size="small" type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-container">
      <div class="right-info">
        <div class="title">
          <span>车辆出入日志</span>
          <div class="exportBtn" @click="handleExportButton">导出 Excel</div>
        </div>
        <el-table :data="vehicle.newTableData" style="width: 100%; min-height: 200px" :row-key="getRowKeys"
          :style="tableStyle" :highlight-current-row="true" :current-row-key="vehicle.currentRowKey"
          @row-click="handleRowClick">
          <el-table-column type="index" label="" width="40" align="center" />
          <el-table-column prop="date" label="类型" width="100" align="center">
            <template #default="scope">
              <span>{{ getType(scope.row.vehicleType) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lprNumber" label="车牌信息" align="center" />
          <el-table-column prop="deviceInfo" :show-overflow-tooltip="true" label="捕捉设备" width="200" align="center" />
          <el-table-column prop="time" label="入/出场时间" align="center">
            <template #default="scope">
              <span>{{
                moment(scope.row.time).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="出入方向" width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.direction == "in" ? "入" : "出" }}</span>
            </template></el-table-column>
          <el-table-column label="是否在白名单" width="110" align="center">
            <template #default="scope">
              <div class="whiteListCheck">
                <el-icon class="yes" v-if="scope.row.whiteListCheck === true" color="#409EFC" :size="18">
                  <Select />
                </el-icon>
                <el-tooltip v-else-if="scope.row.whiteListCheck === false" class="box-item" effect="light"
                  content="一键添加至白名单" placement="right">
                  <el-icon class="un" color="#F56C6C" :size="18" @click.stop="addWhiteListHandleClick(scope.row)">
                    <CloseBold />
                  </el-icon>
                </el-tooltip>
                <span v-else>--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-icon class="edit" color="#409EFC" :size="18" @click.stop="editHandleClick(scope.row)">
                <Edit />
              </el-icon>
            </template></el-table-column>
        </el-table>
        <div class="whiteList">
          <el-button size="small" :icon="Setting" type="primary" color="#8F93F7" style="color: #ffffff; margin-left: 20px"
            @click="handleWhiteList">白名单管理</el-button>
          <div class="whiteList-visible" v-show="vehicle.wlvisible">
            <div class="toolbar">
              <el-form :model="vehicle.queryFormWl" label-width="80px">
                <el-form-item label="起止时间">
                  <el-date-picker size="small" v-model="vehicle.queryFormWl.times" type="daterange" range-separator="一"
                    start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChangeHandleClick" />
                </el-form-item>
                <el-form-item label="车牌">
                  <el-input size="small" v-model="vehicle.queryFormWl.lprNumber" placeholder="请输入车牌信息" />
                </el-form-item>

                <el-form-item class="btns">
                  <el-button :icon="Search" size="small" type="primary" color="#8F93F7" style="color: #ffffff"
                    @click="onSubmitWhiteList">搜索</el-button>
                  <el-button color="#FFFFFF" :icon="Refresh" size="small" type="primary"
                    @click="onResetWhiteList">重置</el-button>
                  <el-button color="#E6A23C" :icon="Refresh" size="small" style="color: #ffffff" type="info"
                    @click="onAdd">新增</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="vehicle.whiteList" style="min-height: 200px; height: calc(100vh - 670px)">
              <el-table-column type="index" label="" width="50" />
              <el-table-column prop="lprNumber" label="车牌信息" width="150" align="center">
                <template #default="scope">
                  <span>{{ scope.row.lprNumber || "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="生效时间" align="center">
                <template #default="scope">
                  <span>{{ getTime(scope.row.validStartTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="direction" label="截止时间" align="center">
                <template #default="scope">
                  <span>{{ getTime(scope.row.validEndTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                  <div class="delWlitem" @click="handleDelWlItem(scope.row)">
                    <el-icon :size="16" color="#F56C6C">
                      <DeleteFilled />
                    </el-icon>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <div class="map-view">
        <div class="switch-btn">
          <div class="pic" :class="vehicle.switchActive === 0 ? 'active' : ''" @click="switchHandleClick('pic')">
            <el-icon>
              <Picture />
            </el-icon>
          </div>
          <div class="video" :class="vehicle.switchActive === 1 ? 'active' : ''" @click="switchHandleClick('video')">
            <el-icon>
              <VideoCamera />
            </el-icon>
          </div>
        </div>
        <div class="view-container">
          <el-image v-if="vehicle.switchActive === 0" crossorigin="anonymous" style="width: 100%; height: 100%"
            :src="vehicle.currentImgUrl" fit="fill" />
          <video id="viewVideo" v-else crossorigin="anonymous" controls loop muted>
            <source :src="vehicle.currentVideoUrl" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  </div>
  <el-dialog :width="600" v-model="vehicle.dialogWlVisible" title="新增白名单" @closed="dialogCloseWl">
    <el-form :model="vehicle.wlForm" :rules="rules" ref="ruleFormRef">
      <el-form-item label="车牌" :label-width="120" prop="lprNumber">
        <el-input style="width: 220px" v-model="vehicle.wlForm.lprNumber" autocomplete="off" placeholder="请输入车牌信息" />
      </el-form-item>
      <el-form-item label="生效时间" :label-width="120" prop="validStartTime">
        <el-date-picker :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" v-model="vehicle.wlForm.validStartTime"
          type="datetime" placeholder="请选择生效时间" />
      </el-form-item>
      <el-form-item label="截止时间" :label-width="120" prop="validEndTime">
        <el-date-picker :clearable="false" value-format="YYYY-MM-DD HH:mm:ss" v-model="vehicle.wlForm.validEndTime"
          type="datetime" placeholder="请选择截止时间" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="vehicle.dialogWlVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogWlAdd(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--车辆出入日志编辑弹窗-->
  <el-dialog :width="600" v-model="vehicle.dialogEditVisible" title="编辑车辆信息" @closed="dialogCloseEdit">
    <el-form :model="vehicle.editForm" :rules="editRules" ref="ruleFormRefEdit">
      <el-form-item label="车牌" :label-width="120" prop="lprNumber">
        <el-input style="width: 232px" v-model="vehicle.editForm.lprNumber" autocomplete="off" placeholder="请输入车牌信息" />
      </el-form-item>
      <el-form-item label="车辆类型" :label-width="120">
        <el-select style="width: 232px" v-model="vehicle.editForm.vehicleType" placeholder="请选择">
          <el-option v-for="item in editTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="出入方向" :label-width="120">
        <el-select style="width: 232px" v-model="vehicle.editForm.direction" placeholder="请选择">
          <el-option v-for="item in editDirectionOpts" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="vehicle.dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogEditSubmit(ruleFormRefEdit)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 65px);
  font-family: SourceHanSansSC;
  display: flex;
  color: #656565;
  flex-direction: column;

  .tabs {
    width: 99%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    margin-top: 10px;

    .currentTotal {
      width: 25%;
      height: 56px;
      color: #656565;
      display: flex;
      margin-left: 20px;

      i {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/project/total.png");
        margin-top: 5px;
        margin-right: 10px;
      }

      .desc {
        width: 80%;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        box-sizing: border-box;
        align-items: center;

        .desc-top {
          display: block;
          font-weight: bold;
          color: #6e91fb;
          font-size: 18px;
        }

        .desc-btm {
          width: 110px;
          font-size: 12px;
          cursor: pointer;

          span {
            display: block;
          }
        }

        .value {
          font-size: 30px;
          font-weight: bold;
          color: #6e91fb;
        }
      }
    }

    .tab-item {
      width: 25%;
      height: 56px;
      background: #6e91fb;
      border-radius: 8px;
      cursor: pointer;

      img {
        width: 32px;
        height: 24px;
        float: left;
        margin: 15px 20px 0px 20px;
      }

      .desc {
        width: 45%;
        float: left;
        margin-top: 8px;
        line-height: 40px;

        .desc-top {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }

        .desc-btm {
          font-size: 12px;
        }
      }

      .value {
        float: right;
        margin-right: 20px;
        line-height: 56px;
        font-size: 30px;
        font-weight: bold;
      }

      &.active {
        background: linear-gradient(0deg, #ea8d13, #f6c01b);
      }
    }
  }

  .toolbar {
    width: 100%;
    margin: 15px 0px;

    :deep .el-form {
      .el-form-item {
        margin-left: 10px;
        float: left;
        margin-bottom: 10px;
      }

      .el-form-item__label {
        color: #656565;
      }
    }

    .btns {
      :deep .el-form-item__content {
        margin-left: 10px !important;
        margin-top: 4px;
      }
    }
  }


  .vehicle-info {
    width: 440px;
    height: calc(100vh - 85px);
    border: 1px solid #dce3ef;
    box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
    border-radius: 6px;
    background: #ffffff;

    .title {
      width: 200px;
      height: 20px;
      border-left: 3px #8f93f7 solid;
      font-weight: bold;
      padding-left: 10px;
      margin: 10px;
    }

    .statistics {
      width: 100%;

      .whole-num {
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: space-around;

        .whole-num-item {
          width: 190px;
          height: 120px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          color: #828796;

          >div {
            text-indent: 90px;
          }

          .name {
            margin: 30px 0px 5px 0px;
          }

          .value {
            font-weight: bold;
            font-size: 22px;
            color: #333333;
          }
        }

        .whole-num-item:nth-child(1) {
          background-image: url("@/assets/images/project/clnum.png");
        }

        .whole-num-item:nth-child(2) {
          background-image: url("@/assets/images/project/cltype.png");
        }
      }

      .type-num {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;

        .type-num-item {
          width: 130px;
          height: 120px;
          display: flex;
          justify-content: space-around;
          color: #828796;

          img {
            width: 60px;
            height: 60px;
          }

          .type-num-item--r {
            margin-left: 5px;

            .value {
              display: block;
              font-weight: bold;
              font-size: 22px;
            }
          }
        }

        .type-num-item:nth-child(1) {
          .value {
            color: #e49e78;
          }
        }

        .type-num-item:nth-child(2) {
          .value {
            color: #598be9;
          }
        }

        .type-num-item:nth-child(3) {
          .value {
            color: #61c8aa;
          }
        }
      }
    }

    .access {
      width: 100%;
      padding: 0px 10px;
      box-sizing: border-box;

      :deep .el-table {
        .cell {
          font-size: 12px;
        }

        th.el-table__cell {
          background: #ecedff;
        }

        td.el-table__cell div {
          font-size: 12px;
        }
      }
    }
  }



  .btn-container {
    width: 100%;
    height: calc(100vh - 240px);
    overflow: auto;
    display: flex;
    flex-direction: row;

    .map-view {
      width: calc(100% - 880px);
      height: calc(100vh - 380px);
      min-height: 400px;
      margin: 40px 0px 0px 20px;
      background: #f7f7f7;
      border-radius: 8px;
      position: relative;

      .switch-btn {
        width: 100px;
        height: 30px;
        background: #ffffff;
        border-radius: 100px;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 9;
        display: flex;
        justify-content: space-around;

        >div {
          width: 50%;
          height: 30px;
          line-height: 33px;
          text-align: center;
          font-size: 18px;
          color: #409eff;
          cursor: pointer;

          &.active {
            color: #ffffff;
            background: #409eff;
            border-radius: 100px;
          }
        }
      }

      .view-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;

        video {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
      }
    }

    .right-info {
      width: 850px;
      height: calc(100vh - 270px);

      .whiteListCheck {
        .un {
          cursor: pointer;
          transition: transform 0.2s ease-in-out;
        }

        .un:hover {
          transform: rotate(45deg);
          color: #E6A23C;
        }
      }

      .edit {
        cursor: pointer;
      }

      .title {
        width: 90%;
        height: 20px;
        border-left: 3px #8f93f7 solid;
        font-weight: bold;
        padding-left: 10px;
        margin: 10px;
        display: flex;
        justify-content: space-between;

        .exportBtn {
          display: inline-block;
          width: 66px;
          height: 25px;
          color: white;
          line-height: 25px;
          padding-left: 30px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/report/export.png");
          cursor: pointer;
          font-size: 12px;
        }
      }

      .whiteList {
        width: 100%;
        overflow: hidden;
        margin-top: 10px;

        .whiteList-visible {
          width: 100%;
          height: calc(100% - 50px);
        }
      }

      .delWlitem {
        cursor: pointer;
      }
    }
  }

  @media screen and (max-width: 1824px) {
    .btn-container {
      height: calc(100vh - 270px);
    }
  }
}
</style>
